<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery.dataTables.min.css">


<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.dataTables.min.js"></script>	
  <script type="text/javascript">
  $(document).ready(function() {
     $('#example').DataTable( {
        "processing": true,
        "serverSide": false,

         "sPaginationType": "full_numbers", 
        "ajax": "${pageContext.request.contextPath}/empAction.action",
         "oLanguage": { 
                    "sProcessing": "正在加载中......", 
                    "sLengthMenu": "每页显示 _MENU_ 条记录", 
                    "sZeroRecords": "对不起，查询不到相关数据！", 
                    "sEmptyTable": "表中无数据存在！", 
                    "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录", 
                    "sInfoFiltered": "数据表中共为 _MAX_ 条记录", 
                    "sSearch": "搜索", 
                    "oPaginate":  
                    { 
                        "sFirst": "首页", 
                        "sPrevious": "上一页", 
                        "sNext": "下一页", 
                        "sLast": "末页" 
                    } 
                }, 
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "age" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );
  </script>
  </head>
  
  <body>
   <table id="example" 
   class="table table-striped table-bordered" >
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        
    </table>
  </body>
</html>
